<template>
    <div class="NumbeRFMainten">
        <div class="pubBig standard ">
            <div class="h0">
                <p class="lt">检验申请</p>
            </div>

            <div class="dRightMain">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="检验申请" name="first">
                        <div style="height: 80%" class="cardP">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>申请方信息</span>
                                </div>
                                <div>

                                    <div>
                                        <el-row>
                                            <el-col :span="6">
                                                <div class="grid-content bg-purple div_P">
                                                    <div class=" form-group ">
                                                        <p>
                                                            <label>患者:</label>
                                                            <input type="text" class="form-control"
                                                                   v-model="model_clinic_typeC" placeholder="必填">
                                                        </p>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content bg-purple-light div_P">
                                                    <div class="form-group">
                                                        <p>
                                                            <label>申请科室:</label>
                                                            <select class="form-control" v-model="model_clinic_typeC"
                                                                    placeholder="请选择">
                                                                <option v-for="(item,index) in jjqkList"
                                                                        :label="item.name"
                                                                        :value="item.code"
                                                                        :key="index"></option>
                                                            </select>
                                                        </p>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content bg-purple div_P">
                                                    <div class="form-group">
                                                        <p>
                                                            <label>申请医生:</label>
                                                            <select class="form-control" v-model="model_clinic_typeC"
                                                                    placeholder="请选择">
                                                                <option v-for="(item,index) in sqlxList"
                                                                        :label="item.name"
                                                                        :value="item.code"
                                                                        :key="index"></option>
                                                            </select>
                                                        </p>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content bg-purple-light div_P">
                                                    <div class="form-group">
                                                        <p>
                                                            <label>预约医院:</label>
                                                            <select class="form-control" v-model="model_clinic_typeC"
                                                                    placeholder="请选择">
                                                                <option v-for="(item,index) in sfjhList"
                                                                        :label="item.name"
                                                                        :value="item.code"
                                                                        :key="index"></option>
                                                            </select>
                                                        </p>
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-card>
                            <div class="grid-content bg-purple ">
                                <el-card style="width: 100%">
                                    <div slot="header" class="clearfix">
                                        <span>申请项目</span>
                                        <el-button type="success" style="float: right; padding: 3px 0"
                                                   @click="showDialog('showTJJY')">添加
                                            <i class="el-icon-upload el-icon--right"></i>
                                        </el-button>
                                    </div>
                                    <div class="fjtable">
                                        <el-table
                                                :data="tableData"
                                                height="138"
                                                border
                                                style="width: 100%">
                                            <el-table-column
                                                    fixed
                                                    prop="date"
                                                    label="项目名称"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                    prop="name"
                                                    label="预约时间"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                    prop="province"
                                                    label="项目费用"
                                            >
                                            </el-table-column>

                                            <el-table-column
                                                    prop="province"
                                                    label="备注"
                                            >
                                            </el-table-column>

                                            <el-table-column
                                                    fixed="right"
                                                    label="操作"
                                                    width="100">
                                                <template slot-scope="scope">
                                                    <el-button @click="handleClickJCItem(scope.row)" type="text"
                                                               size="small">删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-card>
                            </div>

                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="申请列表" name="fourth">
                        <div class="cardP">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>申请列表</span>
                                    <el-button style="float: right; padding: 3px 0" type="text" v-if="false">操作按钮
                                    </el-button>
                                </div>
                                <div class="cardC" style="height: 400px;overflow-y: auto">
                                    <el-row>
                                        <el-col :span="24">
                                            <div class="grid-content bg-purple ">
                                                <el-card style="width: 100%">
                                                    <div slot="header" class="clearfix">
                                                        <span>申请列表</span>
                                                        <el-button type="success" style="float: right; padding: 3px 0"
                                                                   v-if="false">本院上传
                                                            <i class="el-icon-upload el-icon--right"></i>
                                                        </el-button>
                                                    </div>
                                                    <div class="fjtable">
                                                        <el-table
                                                                :data="tableData"
                                                                height="138"
                                                                border
                                                                style="width: 100%">
                                                            <el-table-column
                                                                    fixed
                                                                    prop="date"
                                                                    label="检查号"
                                                                    width="150">
                                                            </el-table-column>
                                                            <el-table-column
                                                                    prop="name"
                                                                    label="检查时间"
                                                                    width="120">
                                                            </el-table-column>
                                                            <el-table-column
                                                                    prop="province"
                                                                    label="设备名称"
                                                                    width="120">
                                                            </el-table-column>
                                                            <el-table-column
                                                                    prop="province"
                                                                    label="检查类型"
                                                                    width="120">
                                                            </el-table-column>
                                                            <el-table-column
                                                                    prop="province"
                                                                    label="检查描述"
                                                            >
                                                            </el-table-column>

                                                            <el-table-column
                                                                    fixed="right"
                                                                    label="操作"
                                                                    width="100">
                                                                <template slot-scope="scope">
                                                                    <el-button @click="handleClickJCItem(scope.row)"
                                                                               type="text" size="small">查看报告
                                                                    </el-button>
                                                                </template>
                                                            </el-table-column>
                                                        </el-table>
                                                    </div>
                                                </el-card>
                                            </div>
                                        </el-col>
                                    </el-row>

                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>

                </el-tabs>
                <el-row style="margin-top: 16px">
                    <el-col :span="12">
                        <el-link disabled></el-link>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light div_P">
                            <el-button type="success" plain>保存</el-button>
                        </div>
                    </el-col>

                </el-row>

            </div>

            <!--弹框   添加检验-->
            <div class="blackBg hyCZBg" v-if="isShow=='showTJJY'">
                <div class="panel-default column2">
                    <em class="closes" @click="showDialog('')">×</em>
                    <div class="panel-heading">添加检验项目</div>
                    <div class="pucLabel">
                        <div class="form-group clearfix">
                            <p>
                                <label>检验项目：</label>
                                <el-autocomplete
                                        style="width: 150px !important;padding: 0px; height: 26px !important;"
                                        id="jymc"
                                        v-model="MingJYcheng"
                                        :fetch-suggestions="handChangion"
                                        v-popover:popover2
                                        @keyup.native="showIYlie($event)"
                                        placeholder="请输入检验名称"
                                ></el-autocomplete>
                            </p>
                            <p>
                                <label>预约时间：</label>
                                <input type="text" class="form-control" v-model="name"/>
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="showDialog('')">关闭</button>
                        <button type="button" class="btn btn-primary" @click="addJcbw()">保存</button>
                    </div>
                </div>
            </div>
            <!-- 检验名称弹框 -->
            <div>
                <el-popover placement="bottom-start" width="800" v-model="JYtable" ref="popover2">
                    <div>
                        <el-table
                                ref="singleJYTable"
                                :data="Mtablelist"
                                height="300"
                                :row-style="rowJyClass"
                                @row-click="JYClick"
                                style="width: 100%"
                        >
                            <el-table-column property="item_name" label="名称" width="220"></el-table-column>
                            <el-table-column property="item_code" label="名称编码" width="180"></el-table-column>
                            <el-table-column property="cost" label="单价" width="50"></el-table-column>
                            <el-table-column property="pym" label="拼音码" width="200"></el-table-column>
                            <!--                        <el-table-column property="quantity" label="总量" width="80"></el-table-column>-->
                            <!--                        <el-table-column property="note" label="注意" width="120"></el-table-column>-->
                        </el-table>
                    </div>
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Bedinformation",
        data() {
            return {
                msg: "SystemManagement 下的 Bedinformation",
                activeName: 'first',
                hzfsList: [
                    {name: '普通会诊', code: "01"},
                    {name: '专家会诊', code: "02"},
                    {name: '知名专家会诊', code: "03"},
                    {name: '门诊', code: "04"},
                ],//会诊方式
                jjqkList: [
                    {name: '是', code: "01"},
                    {name: '否', code: "02"},
                ],//紧急情况
                sqlxList: [
                    {name: '普通报告', code: "01"},
                    {name: '疑难会诊', code: "02"},
                ],//紧急情况
                sfjhList: [
                    {name: '是', code: "01"},
                    {name: '否', code: "02"},
                ],//紧急情况
                hzsjList: [
                    {name: '上午', code: "01"},
                    {name: '下午', code: "02"},
                ],//紧急情况
                radio: '1',
                textarea: '',
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1517 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1519 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1516 弄',
                        zip: 200333
                    }],

                /*************************检验申请**********************************/
                isShow: "",



                /***检验弹框&&&&&&&&&&&&&&&**/
                MingJYcheng: "", //名称
                //检验-------------
                ExecutivDepartments: null, //执行科室列表
                selectJYData: null, //名称table 数组   行改变事件
                indexJy: -1, //名称table 选中下标
                ObjJYList: {}, // 点击或回车选中事件   赋值
                JYtable: false, //名称table 显示与隐藏
                Mtablelist: [], //名称table 数组
                InspecategoryList: [], //检验类别获取数组
                Inspecategory: -1, //检验类别
                MingJYcheng: "", //名称
                Insquantity: 1, //数量
                InExeSection: 1, //执行科室
                Briefmhchtics: "", //简要病史及特征
                BKSJY: false,

            };
        },
        methods: {
            showDialog(show) {
                this.isShow = show;
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleClickJCItem(row) {
                console.log(row);
            },
            /****************************************远程会诊***********************************************************/

            /**检验弹框**********************************************************/
            handChangion(queryString, cb) {
                console.log("检验名称：");
                console.log(queryString);
                cb(queryString);
                this.getJYtable();
            },
            getJYtable() {
                var data = {
                    model: "4.门诊医生-[处方]",
                    code: "4002",
                    input: {
                        item_type: 3, // 检验
                        item_class: this.Inspecategory,
                        name: this.MingJYcheng //项目名称
                    }
                };
                this.$post("CloudHIS/Business_Handle", data)
                    .then(res => {
                        if (res.code == 0) {
                            console.log("获取检验药品");
                            console.log(res);
                            this.Mtablelist = res.data;
                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
                for(var i=0;i<5;i++){

                }

            },
            //检验键盘触发事件
            showIYlie(ev) {
                this.JYtable = true;
                console.log(ev.keyCode);
                //向上 =38
                if (ev.keyCode == 38) {
                    //当焦点在第一行的时候 按向上的时候焦点要聚焦到前一列的最后一个
                    console.log("按上");
                    if (this.indexJy - 1 != -1) {
                        this.indexJy = this.indexJy - 1;
                        this.setJyCurrent(this.Mtablelist[this.indexJy]);
                    }
                }
                //下 = 40
                if (ev.keyCode == 40) {
                    //当newIndex 在最后一行的时候 焦点要聚焦到 下一列的第一个
                    console.log("按下");
                    if (this.indexJy + 1 <= this.Mtablelist.length - 1) {
                        this.indexJy = this.indexJy + 1;
                        this.setJyCurrent(this.Mtablelist[this.indexJy]);
                    }
                }
                //左 = 37
                if (ev.keyCode == 37) {
                    console.log("按左");
                    this.JYtable = false;
                }
                if (ev.keyCode == 13) {
                    console.log("按回车");
                    console.log(this.selectJYData);
                    this.JYtable = false;
                    this.ObjJYList = this.selectJYData;
                    this.MingJYcheng = this.selectJYData.item_name; //名称
                    this.Insquantity = 1; //数量
                    let listinput = document.getElementsByTagName("input");
                    for (var i = 0; i < listinput.length; i++) {
                        if (listinput[i].id == "jysl") {
                            listinput[i].focus();
                        }
                    }
                    console.log(ev);
                    this.indexJy = -1;
                }
                //右 = 39
                if (ev.keyCode == 39) {
                    console.log("按右");
                    this.JYtable = false;
                }
            }
            ,
            JYClick(row) {
                //鼠标选中行赋值
                console.log("点击了我");
                console.log(row);
                this.selectJYData = row;
                this.JYtable = false;
                this.ObjJYList = row;
                this.MingJYcheng = row.item_name; //名称
                this.indexJy = -1;
            }
            ,
            setJyCurrent(row) {
                this.$refs.singleJYTable.setCurrentRow(row);
                console.log("上下选中数据");
                console.log(row);
                this.selectJYData = row;
            }
            ,
            rowJyClass({row, rowIndex}) {
                //选中行样式
                if (this.indexJy === rowIndex) {
                    return {color: "#fff", "background-color": "#155a00"};
                }
            }
            ,
        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if(this.msg.Token!=null&&this.msg.Token!=""){
                console.log("设置Token")
                this.$setToken(this.msg.Token)

            }else{
                console.log("Token为空")
            }
        }
    };
</script>
<style lang="scss">
    .NumbeRFMainten {
        .selectTime {
            .el-input__icon {
                height: 100%;
                width: 25px;
                display: none;
                text-align: center;
                -webkit-transition: all .3s;
                transition: all .3s;
                line-height: 40px;
            }

            .input {
                width: 90px !important;
                height: 28px !important;
            }


        }

        .div_P {
            .form-control {
                display: inline-block;
                width: 180px;
                height: 32px;
                padding: 5px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            }

            .form-group {
                height: 45px;
                margin: 0;
                line-height: 32px;
                padding: 6px 15px 0 15px;
            }
        }

        .fjtable {
            .el-table {
                font-size: 10px !important;
            }
        }

        .cardP {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardC {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 10px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: white;
            }

            .el-card__body {
                padding: 8px;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }


        .el-tree-node.is-current > .el-tree-node__content {
            color: #fff;
            background: #155a00 !important;
        }

        .dRightMain {
            padding: 18px;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-table {
            font-size: 14px !important;
        }

        .el-table thead {
            color: #303133;
        }

        .dRightMain .Tb {
            position: absolute;
            top: 91px;
            left: 240px;
            right: 15px;
            bottom: 0;
            border: 1px solid #ddd;
        }
    }

</style>
